<template>
	<view class="the-page">
		<!-- 收货地址区域 -->
		<uni-list :border="false">
			<uni-list-item title="收货地址" link @click="onSelectAddress" />
			<uni-list-item :title="`姓名：${ address.name }`" />
			<uni-list-item :title="`电话：${ address.tel }`" />
			<uni-list-item :title="`地址：${ address.city + address.county + address.detail }`" />
		</uni-list>
		<!-- 商品列表 -->
		<uni-list class="goods-list" :border="false">
			<!-- 商品卡片列表 -->
			<uni-list-item v-for="(item, i) in cartGoodsList" :key="i" clickable @click="onDetail(item.id)" :border="false"
				:title="item.goodsName" :ellipsis="2" :note="item.goodsSpec" :thumb="item.goodsImg"
				:rightText="`${item.goodsPrice} X ${item.count}`"></uni-list-item>
		</uni-list>

		<!-- 配送信息 -->
		<uni-list-item title="配送服务" note="快递运输,工作日、双休日与节假日均可送货" />

		<!-- 订单备注 -->
		<uni-list-item title="订单备注"></uni-list-item>
		<uni-easyinput type="textarea" autoHeight v-model="note" placeholder="请输入订单备注"></uni-easyinput>

		<!-- 商品总额 -->
		<uni-list-item title="商品总额">
			<!-- 自定义 footer-->
			<template v-slot:footer>
				<view class="amount">{{amount}}</view>
			</template>
		</uni-list-item>

		<!-- 创建订单按钮 -->
		<button type="primary" size="large" @click="handleCreateOrder">创建订单</button>
	</view>
</template>

<script>
	//地址
	import * as addressAPI from '@/api/address.js';
	//商品
	import * as cartAPI from '@/api/cart.js';
	//订单
	import * as orderAPI from '@/api/order.js';

	export default {
		name: 'orderCreate',
		data() {
			return {
				address: { id: null }, //地址对象
				cartGoodsList: [], //商品列表
				note: '', //备注				

			};
		},

		// 生命周期方法
		onLoad() {
			// 设置全局事件（ 在AddressList 页面选中后触发该事件）
			uni.$on("addressChanged", this.onAddressChanged);

			//获取收货地址
			this.getAddress();

			//获取购物车勾选商品
			cartAPI.listIsCheckedByMy().then(result => {
				this.cartGoodsList = result.data;
			});
		},

		onUnload() {
			// 取消事件监听
			uni.$off("addressChanged");
		},

		computed: {
			//计算总金额
			amount() {
				let total = 0;
				this.cartGoodsList.forEach(item => {
					total += item.count * item.goodsPrice;
				});
				return total.toFixed(2);
			}
		},

		methods: {
			// 从后端获取收货地址(参数为空，返回默认地址，否则返回该id对应地址)
			getAddress() {
				addressAPI.getDefault(this.address.id).then(result => {
					if (result.data) {
						this.address = result.data; //
					} else {
						uni.showToast({ title: '请先添加收货地址', icon: 'error' })
						// 导航到收货地址列表中去新建及选择地址
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/address/addressList'
							});
						}, 1000);
					}
				});
			},

			// 保留当前页面，导航到地址列表选择
			onSelectAddress() {
				uni.navigateTo({
					url: "/pages/address/addressList?addressId=" + this.address.id
				})
			},

			// 监听全局事件
			onAddressChanged(e) {
				this.address.id = e.addressId;
				this.getAddress();
			},
			//处理创建订单
			handleCreateOrder() {
				// this.$toast("创建订单，待完成...");
				//准备参数
				let goodsList = []; //商品列表
				this.cartGoodsList.forEach(item => {
					goodsList.push({
						goodsId: item.goodsId,
						count: item.count,
						price: item.goodsPrice,
					});
				});

				let params = {
					//参数结构 参见API接口文档
					addressId: this.address.id,
					note: this.note,
					goodsList: goodsList
				};
				//调用API接口，创建订单
				orderAPI.insert(params).then(result => {
					//显示API调用返回信息，具体参见接口文档
					uni.showToast({ title: '创建订单成功' })
					//创建成功后关闭当前页面导航到订单列表页面
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/order/orderList'
						});
					}, 1000);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.the-page {
		padding: 20px;
	}
</style>